<template>
  <div class='detailSystem'>
    <at-tooltip :content= "max.info_sys_name" :placement="'top'">
      <div class='titleboxs'>
      {{max.info_sys_name}}的详情
    </div>
    </at-tooltip>
    
    <div class='table_boxs'>
      <div class="more_message">基本信息</div>
      <table style='table-layout: fixed;' >
        <tr>
          <td class='clsname'>信息系统名称</td>
          <td class='dataname'>{{max.info_sys_name}}</td>
        </tr>
        <tr>
          <td class='clsname'>信息系统描述</td>
          <td class='dataname'>{{max.info_sys_description}}</td>
        </tr>
        <tr>
          <td class='clsname'>信息系统代码</td>
          <td class='dataname'>{{max.info_sys_code}}</td>
        </tr>
        <tr>
          <td class='clsname'>url地址</td>
          <td class='dataname'>{{max.url}}</td>
        </tr>
        <tr>
          <td class='clsname'>标签</td>
          <td class='dataname'>{{max.tag}}</td>
        </tr>
        <tr>
          <td class='clsname'>维护者</td>
          <td class='dataname'>{{max.maintainer}}</td>
        </tr>
        <tr>
          <td class='clsname'>维护者电话</td>
          <td class='dataname' v-html='ip(max.maintainer_phone)'>{{max.maintainer_phone}}</td>
        </tr>
        <tr>
          <td class='clsname'>维护者邮箱</td>
          <td class='dataname' v-html='ip(max.maintainer_email)'>{{max.maintainer_email}}</td>
        </tr>
        <tr>
          <td class='clsname'>创建时间</td>
          <td class='dataname'>{{max.r_time}}</td>
        </tr>
        <tr>
          <td class='clsname'>备注</td>
          <td class='dataname' v-html='textarea(max.remark)'>{{max.remark}}</td>
        </tr>
      </table>
    </div>

  <div class='websitemore'>
    <div class='table_boxs'>
      <div class="more_message">机构信息</div>
      <table>
      <tr>
        <td class='clsname'>机构名称</td>
        <td class='dataname'>{{nodeDetails.aagency_name}}</td>
      </tr>
      <tr>
        <td class='clsname'>类型</td>
        <td class='dataname'>{{nodeDetails.type_name}}</td>
      </tr>
      <tr>
        <td class='clsname'>所属区域</td>
        <td class='dataname' v-html="area(nodeDetails.belong_area)">{{nodeDetails.belong_area}}</td>
      </tr>
      <tr>
        <td class='clsname'>地理位置</td>
        <td class='dataname' v-html="position(nodeDetails)">{{nodeDetails.city}}</td>
      </tr>
      <tr>
        <td class='clsname'>上级机构</td>
        <td class='dataname' v-html="node(nodeDetails.bagency_name)">{{nodeDetails.bagency_name}} </td>
      </tr>
      <tr>
        <td class='clsname'>监管机构</td>
        <td class='dataname' v-html="node(nodeDetails.cagency_name)">{{nodeDetails.cagency_name}}</td>
      </tr>
      <tr>
        <td class='clsname'>创建时间</td>
        <td class='dataname'>{{nodeDetails.ar_time}}</td>
      </tr>
    </table>
    </div>
  </div>
   <at-button type='primary' style='margin-left:190px;margin-top:-10px;margin-bottom:20px' @click="cancel">返回</at-button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    detailSystemId: String,
    nodeId: String
  },
  name: 'informationdetail',
  data () {
    return {
      max: {}
    }
  },
  computed: {
    ...mapState({
      nodeDetails: state => state.mechanism.nodeDetails
    })
  },
  mounted () {
    this.returndata()
    this.nodedata()
  },
  updated () {
  },
  watch: {
    detailSystemId (val, oldval) {
      let _this = this
      let maxInit = function (val) {
        _this.max = val
      }
      this.$store.dispatch('/informationSystem/returndata', {'info_sys_id': this.detailSystemId, max: maxInit})
    },
    nodeId (val, oldval) {
      this.$store.dispatch('mechanism/getNodedetails', {'aagency_id': this.nodeId})
    }
  },
  methods: {
    cancel () {
      this.$parent._data.detailSystem = false
      this.$parent._data.MSG_SEEN = true
    },
    nodedata () {
      this.$store.dispatch('mechanism/getNodedetails', {'aagency_id': this.nodeId})
    },
    position (row) {
      if (row.area !== null && row.area !== undefined && row.area !== '') {
        return `${row.province}-${row.city}-${row.area}`
      } else {
        if (row.city !== null && row.city !== undefined && row.city !== '') {
          return `${row.province}-${row.city}`
        } else if (row.province !== null && row.province !== undefined && row.province !== '') {
          return `${row.province}`
        } else {
          return '-'
        }
      }
    },
    node (row) {
      if (row == null || row === undefined) {
        return '-'
      } else {
        if (row === '默认节点') {
          return '-'
        } else {
          return row
        }
      }
    },
    area (row) {
      if (row == null || row === undefined) {
        return '-'
      } else {
        return row
      }
    },
    // 获取详情数据
    returndata () {
      let _this = this
      let maxInit = function (val) {
        _this.max = val
      }
      this.$store.dispatch('/informationSystem/returndata', {'info_sys_id': this.detailSystemId, max: maxInit})
    },
    ip (row) {
      if (row === null || row === undefined) {
        return '-'
      } else {
        return row
      }
    },
    textarea (row) {
      if (row === null || row === undefined) {
        return '-'
      } else {
        return row
      }
    }
  }
}
</script>
<style lang='less'>
.detailSystem {
  background: #ffffff;
  margin-bottom: 20px;
  overflow:hidden;
  .more_message {
    display:block;
    font-size:12px;
    color:#5c6781;
    font-weight:bold;
    padding-left:20px;
    height:50px;
    line-height:50px;
    border-bottom:1px solid #eeeeee;
  }
  .clsname{
    width: 150px;
    height: 40px;
    padding-right:20px;
    text-align: right;
    font-size:12px;
    color:#5c6781;
  }
  .dataname{
    word-wrap: break-word;
    width: 269px;
    padding-left: 20px;
    font-size:12px;
    color:#8992a7
  }
  .titlebox {
    height:50px;
    line-height:50px;
    padding-left:20px;
    border-bottom:1px solid #eeeeee;
    font-weight:bold;
    color:#5c6781;
    font-size:14px;
  }
  .titleboxs {
    // max-width: 434px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height:50px;
    line-height:50px;
    padding-left:20px;
    border-bottom:1px solid #eeeeee;
    font-weight:bold;
    color:#5c6781;
    font-size:14px;
  }
  .table_boxs {
    border: 1px solid #eeeeee;
    margin:20px;
  }
}
</style>

